<template>
  <div class="c-bg-sgray">
    <audio id="audio" @ended="playAudioEnd" class="c-pf c-p-l-100"></audio>
    <div class="c-pb100" v-if="assign">
      <div v-if="homeworkType==2" class="c-ph24 c-pt22">
        <div v-for="(item,index) in relates" :key="index">
          <div class="c-ph24 c-bg-white c-br20 c-mb22 c-p c-pt44 c-pb24">
            <div class="c-fs18 c-ph16 c-pv4 c-br-tl20 c-br-br20 c-pa c-p-t0 c-p-l0 theme-bg c-fc-white">{{item.type == 1
              ? "单选题"
              : item.type == 2
                ? "多选题"
                : item.type == 3
                  ? "简答题"
                  : item.type == 4
                    ? "判断题"
                    : item.type == 5
                      ? "填空题"
                      : ""}}</div>
            <prolblem :problemDate="item" :bigNumber="index"></prolblem>
            <div v-if="item.type==1||item.type==2||item.type==3||item.type==4||item.type==5">
              <single-problem @clickShowVideo="clickShowVideo" :questionInfo="item.questionDetail" :allNumber="relates.length" :number="index" :isAncy="1" :comments='item.comments' :userAnswer="item.userAnswer"></single-problem>
            </div>
          </div>
        </div>
        <loading-status-tem :dataStatus="dataStatus" noDataText="我也是有底线的"></loading-status-tem>
      </div>
    </div>
    <div class="c-pf c-p-l0 c-p-r0 c-p-b0 c-w100 c-hh88 c-ph24 c-flex-row c-flex-center c-bg-white c-pz100000">
      <div class="c-flex-grow1 c-fs24 c-hh64 c-br32 c-flex-row c-flex-center c-fc-white theme-bg c-fc-white " @click="clickLookShortAnswerResult">返回</div>
    </div>
    <!-- 视频播放器 -->
    <video-popup :showVideo="showVideo" @clickCloseVideo="clickCloseVideo" :videoSrc="currentVideoObj.videoSrc" :m3u8Url="currentVideoObj.m3u8Url"></video-popup>
  </div>
</template>
<script>
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import { utilJs, wxUtilJs } from "@/utils/common.js";
import prolblem from "@/components/templates/schoolAssignment/problem.vue";
import singleProblem from "@/components/templates/schoolAssignment/singleProblem.vue";
import videoPopup from "@/components/templates/common/videoPopup.vue";
let LIMIT = 10
let page = 1
let loading = false
export default {
  name: "answerResult",
  components: {
    videoPopup,
    singleProblem,
    prolblem,
    loadingStatusTem,
  },
  data() {
    return {
      nobtn:false,
      companyAuth: JSON.parse(localStorage.getItem("companyAuth")),
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : "mb5_default",
      assign: {},
      showDesc:false,
      showDescAnswer:false,
      showMore:false,
      ttId: "",
      tpId: "",
      tlId: "",
      relId: "",
      picture:[],
      audios:[],
      listPage:1,
      ckfrom: global.ckFrom,
      campId:'10597',
      showColumnList:false,
      modeType:3,
      thwId:0,
      relates:[],
      homeworkType:1,
      dataStatus: 'HAS_MORE_DATA',
      userAnswer:{},
      playAduioSrc:'',
      showVideo:false,
      currentVideoObj:{},
      comments:null
    };
  },
  created() {
    utilJs.appShare(this);
  },
  mounted() {
  },
  computed: {
  },
  watch: {},
  methods: {
    reWorker() {
      this.$routerGo(this, "push", {
        path: `/homePage/schoolAssignment/simpleQue?isRewoker==1&homeworkType=${this.homeworkType}&thwId=${this.thwId}&ttId=${this.ttId}&tpId=${this.tpId}&tlId=${this.tlId}`
      });
    },
    clickLookShortAnswerResult() {
      this.$routerGo(this, "replace", {
        path: `/homePage/schoolAssignment/assignDetail?thwId=${this.thwId}&homeworkType=${this.homeworkType}&ttId=${this.ttId}&tpId=${this.tpId}&tlId=${this.tlId}`
      });
    },
    //点击开始播放音频
    clickPlayAudio(audioUrl) {
      let audio = document.getElementById("audio");
      if (this.playAduioSrc == audioUrl) {
        this.playAduioSrc = "";
        document.getElementById("audio").src = this.playAduioSrc;
        return;
      }
      this.playAduioSrc = audioUrl;

      //返回mp3则用audio播放
      if (this.playAduioSrc && this.playAduioSrc.includes("http")) {
        document.getElementById("audio").src = this.playAduioSrc;
        audio.play();
      }
    },
    //监听音频播放结束执行的内容
    playAudioEnd() {
      this.playAduioSrc = "";
      document.getElementById("audio").src = this.playAduioSrc;
    },
    //点击关闭视频
    clickCloseVideo() {
      if (this.showVideo) {
        this.showVideo = false;
      }
    },
    //点击显示视频
    clickShowVideo(videoSrc, m3u8Url) {
      this.showVideo = true;
      this.currentVideoObj = {videoSrc, m3u8Url}
    },
    clickPreviewImage(imgUrl, imgArrList) {
      if (!imgUrl) {
        return;
      }
      let imgArr = [];
      for (let key of imgArrList) {
        let imgItemUrl = key.content || key.url;
        imgArr.push(imgItemUrl);
      }
      let imgData = {
        current: imgUrl, // 当前显示图片的http链接
        urls: imgArr
      }
      wxUtilJs.previewImage(imgData)
      // wxUtilJs.previewImage({
      //   current: imgUrl, // 当前显示图片的http链接
      //   urls: imgArr // 需要预览的图片http链接列表
      // });
    },
    //时间转换成"形式
    changeTimeStr(timeStr) {
      return utilJs.timeTmpToNsTime(timeStr)
    },
    clickDesc() {
      if (this.showDesc) {
        this.showDesc = false;
      } else {
        this.showDesc = true;
      }
    },
    // 去写作业
    goDoHomework() {
      if (this.homeworkType == 1) {
        this.$routerGo(this, "push", {
          path: `/homePage/schoolAssignment/simpleQue?homeworkType=${this.homeworkType}&thwId=${this.thwId}&ttId=${this.ttId}&tpId=${this.tpId}&tlId=${this.tlId}`
        });
      } else {
        this.$routerGo(this, "push", {
          path: `/homePage/schoolAssignment/schoolAnswer?homeworkType=${this.homeworkType}&thwId=${this.thwId}&ttId=${this.ttId}&tpId=${this.tpId}&tlId=${this.tlId}`
        });
      }
    },
    playAplayer(src) {
      if (typeof src == 'string') {
        let arr = document.getElementsByTagName("video");
        for (let i = 0; i < arr.length; i++) {
          if (arr[i].src !== src) {
            arr[i].pause();
          }
        }
      }
    },
    //获取详情
    getAssignDetail() {
      if (loading) {
        return
      }
      loading = true
      // let $this = this
      let postUrl = global.apiurl + "k12/trainings/" + this.thwId + '/getHomeworkDetail?ttId=' + this.ttId + '&page=' + page + '&limit=' + LIMIT;
      utilJs.getMethod(postUrl,
        res => {
          if (JSON.stringify(res) === '[]') {
            this.$showCjToast({
                text:"作业没有权限",
                type: "warn",
                time: 1500
              });
              this.$routerGo(this, "replace", {
                path: `/homePage/camp/campDetail?campId=${this.ttId}`
              });
              return
            }
            this.assign = res
            if (this.homeworkType == 2) {
              if (page == 1) {
                this.relates = res.relates.data
              } else {
                this.relates = [...this.relates, ... res.relates.data];
              }
              if (res.relates.data && (res.relates.data.length < LIMIT)) {
                this.dataStatus = page == 1 && res.relates.data.length == 0 ? 'NO_DATA' : 'NO_MORE_DATA';
              } else {
                this.dataStatus = 'HAS_MORE_DATA';
                page++;
              }
            } else if (this.homeworkType == 1) {
              this.picture = res.media.picture
              this.audios = res.media.audios
              console.log(this.picture, this.audios)
            }
            loading = false
            console.log(this.picture, this.audios)
            this.wechatShare()
            let that = this
            this.$nextTick(() => {
              //获取当前内容的行高，超过3行则显示更多
              let queryTextContent = document.querySelectorAll("#text");
              console.log(queryTextContent)
              if (!queryTextContent) {
                return;
              }
              if (that.$refs.text && that.$refs.text.offsetHeight <= 89) {
                that.nobtn = false
              } else {
                that.nobtn = true
              }
              console.log(that.$refs.text && that.$refs.text.offsetHeight <= 89, that.nobtn)
            })
            this.$nextTick(() => {
              //获取当前内容的行高，超过3行则显示更多
              let queryTextContent = document.querySelectorAll("#textAnswer");
              if (!queryTextContent) {
                return;
              }
              if (that.$refs.textAnswer && that.$refs.textAnswer.offsetHeight <= 89) {
                that.showDescAnswer = false
              } else {
                that.showDescAnswer = true
              }
            })
        })
    },
    //分享
    wechatShare: function () {
      let title = this.assign.title || window.localStorage.getItem("companyName");
      let shareImg = this.assign.shareImg || window.localStorage.getItem("shareLogo");
      let shareDesc = this.assign.shareDesc || window.localStorage.getItem("shareDesc");
      let shareUrl = `${window.location.href.split("#")[0]}#/homePage/schoolAssignment/assignDetail?homeworkType=${this.homeworkType}&thwId=${this.thwId}&tlId=${this.tlId}&ttId=${this.ttId}&tpId=${this.tpId}&refereeId=${localStorage.getItem("userId")}`
      let shareIndexData = {
        shareUrl,
        title,
        shareImg,
        shareDesc,
      };
      utilJs.wechatConfig(
        shareIndexData.shareUrl,
        shareIndexData.title,
        shareIndexData.shareImg,
        shareIndexData.shareDesc,
        function () {},
        true
      );
    },
    //手机端分享
    appShare: function () {
      let title = this.assign.title || window.localStorage.getItem("companyName");
      let shareImg = this.assign.shareImg || window.localStorage.getItem("shareLogo");
      let shareDesc = this.assign.shareDesc || window.localStorage.getItem("shareDesc");
      let shareUrl = `${window.location.href.split("#")[0]}#/homePage/schoolAssignment/assignDetail?homeworkType=${this.homeworkType}&thwId=${this.thwId}&tlId=${this.tlId}&ttId=${this.ttId}&tpId=${this.tpId}&refereeId=${localStorage.getItem("userId")}`
      let shareIndexData = {
        shareUrl,
        title,
        shareImg,
        shareDesc,
      };
      utilJs.appShareTrue(
        shareIndexData.title,
        shareIndexData.shareImg,
        shareIndexData.shareUrl,
        shareIndexData.shareDesc
      );
    },
    clickShowMore() {
      this.showMore = !this.showMore
    },
    windowScrollFunction() {
      utilJs.handleLoading(() => {
        if (this.dataStatus == 'HAS_MORE_DATA' && this.relates.length > 0) {
          this.getAssignDetail();
        }
      });
    },
  },
  activated() {
    setDocumentTitle("作业解析"); // eslint-disable-line
    this.thwId = this.$route.query.thwId;
    this.homeworkType = this.$route.query.homeworkType;
    this.ttId = this.$route.query.ttId || "";
    this.tpId = this.$route.query.tpId || ""; //环节id
    this.tlId = this.$route.query.tlId || "";
    this.relId = this.$route.query.relId || "";
    this.picture = []
    this.audios = []
    page = 1
    this.showColumnList = false
    this.relates = []
    this.dataStatus = 'HAS_MORE_DATA'
    this.userAnswer = {},
    this.playAduioSrc = ''
    this.showVideo = false
    this.currentVideoObj = {},
    this.comments = null
    this.getAssignDetail();
    window.addEventListener('scroll', this.windowScrollFunction);
    // this.getCata()
  },
  deactivated() {
  }
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only  -->
<style scoped>
body{background-color: #F5F7FA;}
.tinymce-text{
  color: #666;
}
.tinymce-text >>> a > img {
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}
.prodType-triangle {
  width: 0;
  height: 0;
  border-width: 0.2rem 0.2rem 0 0.2rem;
  border-style: solid;
  border-color: transparent #fff transparent transparent;
  bottom: 0;
  right: 0;
}
.closeBig >>> p > img,
.closeBig >>> section > img,
.closeBig >>> div > img,
.closeBig >>> img {
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}
.aCloseBig >>> p > a > img,
.aCloseBig >>> section > a > img,
.aCloseBig >>> div > a > img {
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}
.maxMask {
  mask-image: linear-gradient(
    to top,
    rgba(255, 255, 255, 0) 0,
    rgba(255, 255, 255, 0.7) 10%,
    rgba(255, 255, 255, 1) 15%,
    rgba(255, 255, 255, 1) 100%
  );
}
.wifi-symbol {
  width: 1rem;
  height: 1rem;
  overflow: hidden;
  position: relative;
  transform: rotate(135deg);
  -webkit-transform-origin: center;
  transform-origin: center;
  -webkit-transform: translate3d(135deg,0,0);
  -webkit-backface-visibility: hidden;
}
.wifi-circle {
  /* border: 0.1rem solid #999999; */
  border-radius: 50%;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  position: absolute;
  -webkit-transform: translate3d(0,0,0);
}

.first {
  width: 0.1rem;
  height: 0.1rem;
  background: #cccccc;
  top: 0.9rem;
  left: 0.9rem;
}
.second {
  width: 0.5rem;
  height: 0.5rem;
  top: 0.7rem;
  left: 0.7rem;
}
.seconAnimation{
  animation: fadeInOut 1s infinite 0.2s;
}
.third {
  width: 0.8rem;
  height: 0.8rem;
  top: 0.5rem;
  left: 0.5rem;
}
.thirdAnimation{
  animation: fadeInOut 1s infinite 0.4s;
}
@keyframes fadeInOut {
    0% {
        opacity: 0; /*初始状态 透明度为0*/
    }
    100% {
        opacity: 1; /*结尾状态 透明度为1*/
    }
}
.c-hh166{height: 4.15rem;}
</style>
